Rodrigo

Hi @stectix, Are you getting this error locally or during deploy?

Hi, The demo you're linking uses clip path and a timer. For that you can use GSAP Delayed Call: https://gsap.com/docs/v3/GSAP/gsap.delayedCall() This is a very useful tool for working with Clip Path. https://bennettfeely.com/clippy/ Here is a simple demo: https://codepen.io/GreenSock/pen/eYaZZmL Last bu not least you should check this thread by @mvaneijgen about masking: Hopefully this helps. Happy Tweening!

Hi, Those demo should provide a great starting point https://codepen.io/cassie-codes/pen/abyZYym Hopefully this helps Happy Tweening!

Hi, Maybe something like this: https://codepen.io/GreenSock/pen/QWRyNOZ Hopefully this helps Happy Tweening!

Mhh.... maybe you have both packages installed but installing the premium one with this command line should replace the previous installation: npm install gsap@npm:@gsap/CLUB-LEVEL What you could try is remove GSAP and delete the package-lock.json file and then install GSAP with the bonus plugins. The other thing that I missed in the first post is that you're working with NextJS, so you need to import from the dist folder in order to use the UMD modules: import gsap from "gsap"; import { MorphSVGPlugin } from "gsap/dist/MorphSVGPlugin"; if (typeof window !== "undefined") { gsap.registerPlugin(MorphSVGPlugin, useGSAP); } Hopefully this helps. Happy Tweening!

Hi, The container of the element you are rotating needs a perspective applied to it, otherwise the rotation will be applied in 2D; https://developer.mozilla.org/en-US/docs/Web/CSS/perspective https://3dtransforms.desandro.com/perspective Something like this in your CSS: .home__contact__bean__container { position: absolute; width: 100%; height: 100%; right: 0; top: 0; perspective: 250px; overflow: hidden; } Play with the value and see what works better for your taste. That value looks good IMHO. Hopefully this helps. Happy Tweening!

Hi @philcharitou and welcome to the GSAP Forums! Just a syntax issue! In keyframes land the easing for each keyframe is easeEach not ease: // Wrong gsap.to(".animate-sway", { keyframes: { y: [0, 18, 8, -8, 0], rotate: [-8, 3, 8, -3, -8], ease: "none", }, repeat: -1, duration: 3, }); // Right gsap.to(".animate-sway", { keyframes: { y: [0, 18, 8, -8, 0], rotate: [-8, 3, 8, -3, -8], easeEach: "none", }, repeat: -1, duration: 3, }); https://gsap.com/resources/keyframes/#percentage-keyframes---v39 Here is a fork of your demo: https://codepen.io/GreenSock/pen/YzbwwYz Hopefully this helps. Happy Tweening!

Hi, You can borrow some of the logic in this demo: https://codepen.io/GreenSock/pen/jOQXYzV Hopefully this helps. Happy Tweening!

Hi @Wardo and welcome to the GSAP Forums! If you have the regular GSAP version installed before upgrading to the bonus tier, you could delete your package-lock.json file locally and push to your repo in order to trigger a deploy and see if that helps. Finally thanks for being a GSAP Club member and supporting GSAP! 💚 Hopefully this helps. Happy Tweening!

Hi, As Mitchel mentions is super hard for us to do much without a working demo, so checking our Stackblitz collections (the NextJS one) should be a very good first step. Finally I'm curious about this: tl_slide.from(el[1].current, { x: -100, // opacity: 0, }) Those elements you are animating there are the same ones that have these styles applied to them? .el { display: flex; flex-direction: column; border-radius: 8px; transition: all 0.35s ease; padding: 40px; &:nth-child(1) { padding: 40px; } Animating an element that has CSS transition all with GSAP is generally a bad idea as Jack explains here: Hopefully this helps. Happy Tweening!

Hi, The main issue here is that you're pinning an element whose height is not the height of the viewport: .service-slider_wrapper { overflow: hidden; max-height: 500px !important; } const slider = document.querySelector(".service-slider_wrapper"); const pin = gsap.to(rightSections, { yPercent: -100 * (rightSections.length - 1), ease: "none", scrollTrigger: { trigger: slider, pin: true, invalidateOnRefresh: true, start: "center center-=100", scrub: 1, end: () => "+=" + (slider.offsetHeight || 0), markers: false } }); Because of the way pinning works, that creates the extra space after that element. The solution is to wrap that element and the next with an extra element and pin that one: <div class="pin-wrapper"> <div class="roadmap-sec"> </div> <div class="bottom"></div> </div> const pin = gsap.to(rightSections, { yPercent: -100 * (rightSections.length - 1), ease: "none", scrollTrigger: { trigger: slider, pin: ".pin-wrapper", invalidateOnRefresh: true, start: "center center-=100", scrub: 1, end: () => "+=" + (slider.offsetHeight || 0), markers: true } }); Here is a fork of your demo: https://codepen.io/GreenSock/pen/PovZoRv Hopefully this helps. Happy Tweening!

Hi, There is nothing wrong with passing a prop to a child and there is nothing wrong to import GSAP and create a GSAP Context instance on every component, especially if the component could be unmounted before the parent. Honestly I prefer to import GSAP and create a Context instance on every component, you'll hardly see any dip in performance with that approach. Finally there is no need to store the GSAP Context instance on a ref and make it a reactive property, since I can't think of a reason to track updates to a GSAP Context instance on a Vue component, just use a variable: let ctx; onMounted(() => { ctx = gsap.context(); }); onUnmounted(() => { ctx && ctx.revert(); }); Hopefully this helps. Happy Tweening!

Are you using that approach in your layout file in astro? In your demo I don't see that. That basically seems to be something Astro is doing behind the scenes. ScrollSmoother works without any issues with Next, Nuxt, SvelteKit and other SSR systems. If with that approach it doesn't work honestly IDK what to tell you. Sorry I can't be of more assistance. Happy Tweening!

Hi, Maybe something like this: https://codepen.io/GreenSock/pen/mdYeGQr Hopefully this helps. Happy Tweening!

Hi, Maybe these demos can help: https://codepen.io/GreenSock/pen/BamxvZW https://codepen.io/GreenSock/pen/qBryorx Hopefully this helps. Happy Tweening!